import { Tabs, Badge } from "antd-mobile";
import React, { Component } from "react";
import "./discover.scss";
import styles from "./discover.module.scss";
import videoImg from "../../assets/images/dota-1.jpg";
import videoImg2 from "../../assets/images/dota-2.jpg";
class DiscoverPage extends Component {
  state = {
    nowIndex:167,
    tabs: [
      { title: <Badge style={{width:"50px"}}>关注</Badge> ,sub:0},
      { title: <Badge style={{width:"50px"}}>真香</Badge> ,sub:1},
      { title: <Badge style={{width:"50px"}}>短视频</Badge> ,sub:2},
    ],
    waterVideo: [
      { id: 1, videoUrl: videoImg, tit: "hahh" },
      { id: 2, videoUrl: videoImg2, tit: "ffshahh" },
    ],
  };

  changeIndex = (i) => {
    if (i.sub === 0) {
      this.setState({
        nowIndex: 117,
      });
    } else if(i.sub===1){
      this.setState({
        nowIndex: 167,
      });
    }else{
      this.setState({
        nowIndex: 217,
      });
    }
  };

  render() {
    return (
      <div style={{ height: "100%" }}>
        <Tabs
          tabs={this.state.tabs}
          initialPage={1}
          tabBarUnderlineStyle={{ width: "50px",left:this.state.nowIndex}}
          onTabClick={this.changeIndex}
        >
          <div
            style={{
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              height: "100%",
              backgroundColor: "#fff",
            }}
          >
            关注
          </div>
          <div
            style={{
              display: "flex",
              // alignItems: "center",
              justifyContent: "center",
              height: "100%",
              backgroundColor: "#fff",
            }}
          >
            <ul className={styles.videoLeft}>
              {this.state.waterVideo.map((item) => {
                return (
                  <li key={item.id}>
                    <img src={item.videoUrl} alt="" style={{ width: "50%" }} />
                    <p>{item.tit}</p>
                  </li>
                );
              })}
            </ul>
          </div>
          <div
            style={{
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              height: "100%",
              backgroundColor: "#fff",
            }}
          >
            短视频
          </div>
        </Tabs>
      </div>
    );
  }
}
export default DiscoverPage;
